- var srcAddr = "https://github.com/aktos-io/scada.js/blob/master/apps/example/webapps/showcase/previews/progress/progress.pug"
anchor progress
.ui.segments
    h3.ui.top.attached.block.header progress #[a(href="#progress") #[i.linkify.icon]]
    .ui.attached.segment
        ui-progress.top.attached.orange(value="{{progress.one.curr}}" max="{{progress.one.max}}")
        btn.basic.teal.label.icon(href=srcAddr newtab) #[i.code.icon] View on Github #[i.github.icon]


        assign(input="{{true}}" output="{{hidemeprogrgess}}")
        checkbox(checked="{{hidemeprogrgess}}") hide/show 
            
        +if('hidemeprogrgess')
            r-table(class="ui very basic collapsing celled table")
                tbody 
                    tr 
                        td
                            h3.ui.top.header Simple progress bars (ui-progress)
                            ui-progress.purple(value="{{progress.one.curr}}" max="{{progress.one.max}}")
                            ui-progress.red(value="{{progress.one.curr}}" max="{{progress.one.max}}")
                        td 
                            h3.ui.top.header Line progress bar
                            progress.red(type="line" value="{{progress.one.curr}}" max="{{progress.one.max}}")
                            div(style="margin: 3px")
                                label(format='##.# Ampere' value="{{progress.one.curr}}")

                        td 
                            h3.ui.top.header Circular progress bar
                            progress.red(type="circle" value="{{progress.one.curr}}" max="{{progress.one.max}}")
                        td 
                            h3.ui.top.header Circular progress bar
                            progress.red(
                                type="circle" 
                                value="{{progress.one.curr}}" 
                                max="{{progress.one.max}}"
                                width="200px"
                                height="200px")

                        td 
                            h3.ui.top.header Vertical progress bar 
                            progress.purple(
                                type="vertical" 
                                value="{{progress.one.curr}}" 
                                max="{{progress.one.max}}"
                                width="100px"
                                height="100px")
                            label(format='##.# meter' value="{{progress.one.curr}}")

                        td
                            h3.ui.top.header Half circle progress bar
                            progress.green(type="fan" value="{{progress.one.curr}}" max="{{progress.one.max}}")

            slider(value="{{progress.one.curr}}" max="{{progress.one.max}}")
            r-table(class="ui very basic collapsing celled table")
                tbody 
                    tr 
                        th
                            h3.ui.top.header Custom progress bar (heart)
                            progress.purple(value="{{progress.one.curr}}" max="{{progress.one.max}}")
                                +partial('path') 
                                    include:stripSvg(getPath) ./heart.svg

                        th
                            h3.ui.top.header Custom progress bar (heart, fill)
                            progress.purple(value="{{progress.one.curr}}" 
                                max="{{progress.one.max}}"
                                fill)
                                +partial('path') 
                                    include:stripSvg(getPath) ./heart.svg
                        th
                            h3.ui.top.header Custom progress bar (thermometer, fill)
                            progress.purple(value="{{progress.one.curr}}" 
                                max="{{progress.one.max}}" 
                                percent="{{progress.one.percent}}"
                                height="200px"
                                width="100px"
                                img="progress/thermometer.svg")
                            //-
                                .ui.black.label
                                    seven-segment 
                                        label(format='#.# °C' value="{{progress.one.curr}}")
                            .ui.black.tag.label(style="position: relative; top: -50px; left: 50px")
                                seven-segment(value="{{progress.one.curr}}")
                                
                        th
                            h3.ui.top.header Custom progress bar (Truck)
                            progress.purple(value="{{progress.one.curr}}" 
                                max="{{progress.one.max}}" 
                                width="200px"
                                height="150px"
                                offset="50"
                                img="progress/truck-tanker.png"
                                background="progress/truck.png")
                            .ui.red.large.tag.label(style="position: relative; top: -100px; left: 170px") 
                                label(format='###.## m3' value="{{progress.one.curr}}")
                                                            
                    
        h2.ui.horizontal.divider.header 
            i.wrench.icon 
            | test inputs 

        input-field(value="{{progress.one.curr}}" type="number")

        slider(value="{{progress.one.curr}}" max="{{progress.one.max}}")
        sync(value="{{progress.one.curr}}" topic="hello.slider")
